<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>码小仓_数据编辑管理工具</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    
    <!-- 配置Tailwind自定义颜色和字体 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        secondary: '#36CFC9',
                        success: '#52C41A',
                        warning: '#FAAD14',
                        danger: '#FF4D4F',
                        dark: '#1F2329',
                        'light-gray': '#F2F3F5'
                    },
                    fontFamily: {
                        inter: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .transition-height {
                transition: max-height 0.3s ease-in-out;
            }
            .card-shadow {
                box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
            }
            .hover-lift {
                transition: transform 0.2s, box-shadow 0.2s;
            }
            .hover-lift:hover {
                transform: translateY(-2px);
                box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12);
            }
        }
    </style>
</head>
<body class="font-inter bg-gray-50 text-dark min-h-screen">
    <!-- 顶部导航 -->
    <header class="bg-white shadow-sm sticky top-0 z-50">
        <div class="container mx-auto px-4 py-4 flex justify-between items-center">
            <div class="flex items-center space-x-2">
                <i class="fa fa-database text-primary text-2xl"></i>
                <h1 class="text-xl md:text-2xl font-bold text-primary">码小仓_数据编辑管理工具</h1>
            </div>
            <div class="flex items-center space-x-1 md:space-x-3">
                <button id="exportBtn" class="flex items-center px-3 py-2 text-sm bg-white border border-primary text-primary rounded-md hover:bg-primary/5 transition-colors">
                    <i class="fa fa-download mr-1"></i> 导出
                </button>
                <button id="importBtn" class="flex items-center px-3 py-2 text-sm bg-white border border-primary text-primary rounded-md hover:bg-primary/5 transition-colors">
                    <i class="fa fa-upload mr-1"></i> 导入
                </button>
                <input type="file" id="fileInput" accept=".json,.txt" class="hidden">
                <button id="addNewBtn" class="flex items-center px-3 py-2 text-sm bg-primary text-white rounded-md hover:bg-primary/90 transition-colors">
                    <i class="fa fa-plus mr-1"></i> 新增
                </button>
            </div>
        </div>
    </header>

    <!-- 主内容区 -->
    <main class="container mx-auto px-4 py-6">
        <!-- 搜索和过滤区 -->
        <div class="bg-white rounded-lg p-4 mb-6 card-shadow">
            <div class="flex flex-col md:flex-row gap-4">
                <div class="flex-grow relative">
                    <i class="fa fa-search absolute left-3 top-1/2 -translate-y-1/2 text-gray-400"></i>
                    <input type="text" id="searchInput" placeholder="搜索ID、标题或类别..." 
                        class="w-full pl-10 pr-4 py-2 border border-gray-200 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary transition-all">
                </div>
                <div class="flex gap-2">
                    <select id="categoryFilter" class="px-3 py-2 border border-gray-200 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary transition-all">
                        <option value="">所有类别</option>
                        <option value="装机常用">装机常用</option>
						<option value="电脑系统">电脑系统</option>
						<option value="办公软件">办公软件</option>
						<option value="平面设计">平面设计</option>
						<option value="影视动画">影视动画</option>
						<option value="AutoCAD">AutoCAD</option>
						<option value="三维设计">三维设计</option>
						<option value="机械设计">机械设计</option>
						<option value="建筑设计">建筑设计</option>
						<option value="网页设计">网页设计</option>
						<option value="开发编程">开发编程</option>
						<option value="数据分析">数据分析</option>
						<option value="仿真模拟">仿真模拟</option>
						<option value="电子电路">电子电路</option>
						<option value="行业软件">行业软件</option>
                    </select>
                    <select id="typeFilter" class="px-3 py-2 border border-gray-200 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary transition-all">
                        <option value="">所有类型</option>
                        <option value="android">android</option>
                        <option value="windows">windows</option>
                    </select>
                </div>
            </div>
        </div>

        <!-- 数据列表 -->
        <div class="bg-white rounded-lg overflow-hidden card-shadow mb-6">
            <div class="overflow-x-auto">
                <table class="min-w-full divide-y divide-gray-200">
                    <thead class="bg-light-gray">
                        <tr>
                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">ID</th>
                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">标题</th>
                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">类别</th>
							<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">大小</th>
                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">类型</th>				
                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">网盘</th>
                            <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">操作</th>
                        </tr>
                    </thead>
                    <tbody id="dataList" class="bg-white divide-y divide-gray-200">
                        <!-- 数据行将通过JavaScript动态生成 -->
                    </tbody>
                </table>
            </div>
            <div id="emptyState" class="py-16 text-center hidden">
                <i class="fa fa-folder-open-o text-4xl text-gray-300 mb-4"></i>
                <p class="text-gray-500">暂无数据，请添加新数据或导入数据文件</p>
            </div>
        </div>

        <!-- 详情面板 -->
        <div id="detailPanel" class="bg-white rounded-lg p-6 card-shadow mb-6 hidden">
            <div class="flex justify-between items-center mb-4">
                <h2 id="detailTitle" class="text-xl font-semibold">数据详情</h2>
                <button id="closeDetailBtn" class="text-gray-400 hover:text-gray-600">
                    <i class="fa fa-times"></i>
                </button>
            </div>
            <div id="detailContent" class="space-y-4">
                <!-- 详情内容将通过JavaScript动态生成 -->
            </div>
        </div>

        <!-- 编辑表单 -->
        <div id="editFormPanel" class="bg-white rounded-lg p-6 card-shadow mb-6 hidden">
            <div class="flex justify-between items-center mb-6">
                <h2 id="formTitle" class="text-xl font-semibold">新增数据</h2>
                <button id="closeFormBtn" class="text-gray-400 hover:text-gray-600">
                    <i class="fa fa-times"></i>
                </button>
            </div>
            
            <form id="dataForm" class="space-y-4">
                <input type="hidden" id="formId">
                
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div>
                        <label for="title" class="block text-sm font-medium text-gray-700 mb-1">标题 <span class="text-danger">*</span></label>
                        <input type="text" id="title" name="title" required
                            class="w-full px-3 py-2 border border-gray-200 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary transition-all">
                    </div>
                    
                    <div>
                        <label for="description" class="block text-sm font-medium text-gray-700 mb-1">描述</label>
                        <input type="text" id="description" name="description"
                            class="w-full px-3 py-2 border border-gray-200 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary transition-all">
                    </div>
                    
                    <div>
                        <label for="type" class="block text-sm font-medium text-gray-700 mb-1">类型</label>
                        <select id="type" name="type"
                            class="w-full px-3 py-2 border border-gray-200 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary transition-all">
                            <option value="">请选择</option>
                            <option value="android">android</option>
                            <option value="windows">windows</option>
                            <option value="ios">ios</option>
                            <option value="macos">macos</option>
                        </select>
                    </div>
					
					<div>
						<label for="size" class="block text-sm font-medium text-gray-700 mb-1">软件大小</label>
						<input type="text" id="size" name="size" placeholder="例如: 500MB"
						class="w-full px-3 py-2 border border-gray-200 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary transition-all">
					</div>
                    
                    <div>
                        <label for="category" class="block text-sm font-medium text-gray-700 mb-1">类别</label>
                        <input type="text" id="category" name="category"
                            class="w-full px-3 py-2 border border-gray-200 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary transition-all">
                    </div>
                    
                    <div>
                        <label for="imageUrl" class="block text-sm font-medium text-gray-700 mb-1">图片URL</label>
                        <input type="text" value="http://localhost:8080/images/001-1756781892/1.png" id="imageUrl" name="imageUrl"
                            class="w-full px-3 py-2 border border-gray-200 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary transition-all">
                    </div>
                    
                    <div>
                        <label for="netdiskLink" class="block text-sm font-medium text-gray-700 mb-1">网盘链接 <span class="text-danger">*</span></label>
                        <input type="text" id="netdiskLink" name="netdiskLink" required
                            class="w-full px-3 py-2 border border-gray-200 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary transition-all">
                    </div>
                    
                    <div>
                        <label for="shareCode" class="block text-sm font-medium text-gray-700 mb-1">提取码 <span class="text-danger">*</span></label>
                        <input type="text" value="7777" id="shareCode" name="shareCode" required
                            class="w-full px-3 py-2 border border-gray-200 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary transition-all">
                    </div>
                    
                    <div>
                        <label for="netdiskName" class="block text-sm font-medium text-gray-700 mb-1">网盘名称</label>
                        <input type="text" value="百度网盘" id="netdiskName" name="netdiskName"
                            class="w-full px-3 py-2 border border-gray-200 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary transition-all">
                    </div>
                </div>
                
                <div>
                    <label for="details" class="block text-sm font-medium text-gray-700 mb-1">详细说明</label>
                    <textarea id="details" name="details" rows="3"
                        class="w-full px-3 py-2 border border-gray-200 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary transition-all"></textarea>
                </div>
                
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">截图URLs (每行一个)</label>
                    <textarea id="screenshots" rows="3"
                        class="w-full px-3 py-2 border border-gray-200 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary transition-all"
                        placeholder="每行输入一个截图URL，空行将被忽略"></textarea>
                    <p class="text-xs text-gray-500 mt-1">每行输入一个截图URL，多个截图请分行输入</p>
                </div>
                
                <div class="flex justify-end space-x-3 pt-4 border-t border-gray-100">
                    <button type="button" id="cancelFormBtn" class="px-4 py-2 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-50 transition-colors">
                        取消
                    </button>
                    <button type="submit" class="px-4 py-2 bg-primary text-white rounded-md hover:bg-primary/90 transition-colors">
                        保存
                    </button>
                </div>
            </form>
        </div>
    </main>

    <!-- 底部信息 -->
    <footer class="bg-white border-t border-gray-200 py-4">
        <div class="container mx-auto px-4 text-center text-sm text-gray-500">
            <p>码小仓_数据编辑管理工具 &copy; 2023</p>
        </div>
    </footer>

    <!-- 提示框 -->
    <div id="toast" class="fixed top-4 right-4 px-4 py-3 rounded-md shadow-lg transform translate-x-full transition-transform duration-300 flex items-center z-50">
        <i id="toastIcon" class="mr-2"></i>
        <span id="toastMessage"></span>
    </div>

    <!-- 确认对话框 -->
    <div id="confirmDialog" class="fixed inset-0 bg-black/50 flex items-center justify-center z-50 hidden">
        <div class="bg-white rounded-lg p-6 max-w-md w-full mx-4 transform transition-all scale-95 opacity-0" id="dialogContent">
            <h3 class="text-lg font-medium mb-3">确认删除</h3>
            <p class="text-gray-600 mb-5" id="dialogMessage">您确定要删除这条数据吗？此操作不可撤销。</p>
            <div class="flex justify-end space-x-3">
                <button id="cancelDialogBtn" class="px-4 py-2 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-50 transition-colors">
                    取消
                </button>
                <button id="confirmDialogBtn" class="px-4 py-2 bg-danger text-white rounded-md hover:bg-danger/90 transition-colors">
                    确认删除
                </button>
            </div>
        </div>
    </div>

    <script>
        // 初始化数据
        let dataList = [];
        // 当前编辑的数据ID
        let currentEditId = null;
        // 当前要删除的数据ID
        let currentDeleteId = null;

        // DOM元素
        const dataListElement = document.getElementById('dataList');
        const emptyStateElement = document.getElementById('emptyState');
        const detailPanel = document.getElementById('detailPanel');
        const detailContent = document.getElementById('detailContent');
        const detailTitle = document.getElementById('detailTitle');
        const editFormPanel = document.getElementById('editFormPanel');
        const formTitle = document.getElementById('formTitle');
        const dataForm = document.getElementById('dataForm');
        const formId = document.getElementById('formId');
        const toast = document.getElementById('toast');
        const toastIcon = document.getElementById('toastIcon');
        const toastMessage = document.getElementById('toastMessage');
        const confirmDialog = document.getElementById('confirmDialog');
        const dialogContent = document.getElementById('dialogContent');
        const searchInput = document.getElementById('searchInput');
        const categoryFilter = document.getElementById('categoryFilter');
        const typeFilter = document.getElementById('typeFilter');

        // 从本地存储加载数据
        function loadDataFromLocalStorage() {
            try {
                const storedData = localStorage.getItem('mcang_data');
                if (storedData) {
                    dataList = JSON.parse(storedData);
                    showToast('success', `成功加载 ${dataList.length} 条数据`);
                } else {
                    showToast('info', '暂无数据，请添加新数据或导入数据文件');
                    dataList = [];
                }
            } catch (error) {
                console.error('加载本地数据失败:', error);
                showToast('error', '加载本地数据失败');
                dataList = [];
            }
        }

        // 保存数据到本地存储
        function saveDataToLocalStorage() {
            try {
                localStorage.setItem('mcang_data', JSON.stringify(dataList));
                return true;
            } catch (error) {
                console.error('保存数据到本地存储失败:', error);
                showToast('error', '保存数据失败');
                return false;
            }
        }

        // 初始化页面
        document.addEventListener('DOMContentLoaded', () => {
            loadDataFromLocalStorage();
            setupEventListeners();
            renderDataList();
        });

        // 设置事件监听器
        function setupEventListeners() {
            // 新增按钮
            document.getElementById('addNewBtn').addEventListener('click', openAddForm);
            
            // 关闭表单按钮
            document.getElementById('closeFormBtn').addEventListener('click', closeForm);
            document.getElementById('cancelFormBtn').addEventListener('click', closeForm);
            
            // 关闭详情按钮
            document.getElementById('closeDetailBtn').addEventListener('click', closeDetail);
            
            // 表单提交
            dataForm.addEventListener('submit', handleFormSubmit);
            
            // 导入导出按钮
            document.getElementById('exportBtn').addEventListener('click', exportData);
            document.getElementById('importBtn').addEventListener('click', () => {
                document.getElementById('fileInput').click();
            });
            document.getElementById('fileInput').addEventListener('change', importData);
            
            // 确认对话框按钮
            document.getElementById('confirmDialogBtn').addEventListener('click', confirmDelete);
            document.getElementById('cancelDialogBtn').addEventListener('click', closeConfirmDialog);
            
            // 搜索和筛选
            searchInput.addEventListener('input', renderDataList);
            categoryFilter.addEventListener('change', renderDataList);
            typeFilter.addEventListener('change', renderDataList);
        }

        // 渲染数据列表
        function renderDataList() {
            const searchTerm = searchInput.value.toLowerCase();
            const category = categoryFilter.value;
            const type = typeFilter.value;
            
            // 过滤数据
            const filteredData = dataList.filter(item => {
                const matchesSearch = 
                    item.id.toString().includes(searchTerm) ||
                    (item.title && item.title.toLowerCase().includes(searchTerm)) ||
                    (item.category && item.category.toLowerCase().includes(searchTerm));
                
                const matchesCategory = !category || item.category === category;
                const matchesType = !type || item.type === type;
                
                return matchesSearch && matchesCategory && matchesType;
            });
            
            // 清空列表
            dataListElement.innerHTML = '';
            
            // 检查是否有数据
            if (filteredData.length === 0) {
                emptyStateElement.classList.remove('hidden');
                return;
            }
            
            // 隐藏空状态
            emptyStateElement.classList.add('hidden');
            
            // 添加数据行
            filteredData.forEach(item => {
                const row = document.createElement('tr');
                row.className = 'hover:bg-gray-50 transition-colors hover-lift';
                
                // 处理网盘名称和提取码的兼容性（旧数据可能使用中文键名）
                const netdiskName = item.netdiskName || '未知网盘';
                const shareCode = item.shareCode || (item['提取码'] || '');
                
                row.innerHTML = `
                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-primary">${item.id}</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm">${item.title || '-'}</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm">${item.category || '-'}</td>
					<td class="px-6 py-4 whitespace-nowrap text-sm">${item.size || '-'}</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm">${item.type || '-'}</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm">
                        ${netdiskName}
                        ${shareCode ? `<span class="ml-2 inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-primary/10 text-primary">${shareCode}</span>` : ''}
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                        <div class="flex justify-end space-x-2">
                            <button data-id="${item.id}" class="view-btn text-blue-600 hover:text-blue-900">
                                <i class="fa fa-eye"></i>
                            </button>
                            <button data-id="${item.id}" class="edit-btn text-green-600 hover:text-green-900">
                                <i class="fa fa-pencil"></i>
                            </button>
                            <button data-id="${item.id}" class="delete-btn text-red-600 hover:text-red-900">
                                <i class="fa fa-trash"></i>
                            </button>
                        </div>
                    </td>
                `;
                
                dataListElement.appendChild(row);
            });
            
            // 为按钮添加事件监听器
            document.querySelectorAll('.view-btn').forEach(btn => {
                btn.addEventListener('click', () => {
                    const id = parseInt(btn.getAttribute('data-id'));
                    viewItem(id);
                });
            });
            
            document.querySelectorAll('.edit-btn').forEach(btn => {
                btn.addEventListener('click', () => {
                    const id = parseInt(btn.getAttribute('data-id'));
                    editItem(id);
                });
            });
            
            document.querySelectorAll('.delete-btn').forEach(btn => {
                btn.addEventListener('click', () => {
                    const id = parseInt(btn.getAttribute('data-id'));
                    confirmDeleteItem(id);
                });
            });
        }

        // 查看项目详情
        function viewItem(id) {
            const item = dataList.find(item => item.id === id);
            if (!item) return;
            
            // 处理兼容性字段
            const netdiskLink = item.netdiskLink || item['网盘链接'] || '';
            const shareCode = item.shareCode || item['提取码'] || '';
            const netdiskName = item.netdiskName || '未知网盘';
            
            // 构建详情HTML
            let screenshotsHtml = '';
            if (item.screenshots && item.screenshots.length > 0) {
                screenshotsHtml = `
                    <div class="mt-4">
                        <h4 class="text-sm font-medium text-gray-700 mb-2">截图预览</h4>
                        <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-3">
                            ${item.screenshots.map(url => `
                                <div class="bg-gray-100 rounded-md overflow-hidden h-40 flex items-center justify-center">
                                    <img src="${url}" alt="截图" class="max-w-full max-h-full object-contain">
                                </div>
                            `).join('')}
                        </div>
                    </div>
                `;
            }
            
            // 设置详情内容
            detailTitle.textContent = item.title;
            detailContent.innerHTML = `
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div>
                        <p class="text-sm text-gray-500">ID</p>
                        <p class="font-medium">${item.id}</p>
                    </div>
                    <div>
                        <p class="text-sm text-gray-500">类别</p>
                        <p>${item.category || '-'}</p>
                    </div>
					
					<!-- 新增图片URL查看部分 -->
					<div class="md:col-span-2">
						<p class="text-sm text-gray-500">图片URL</p>
						<p class="break-all mb-2">
							<a href="${item.imageUrl || '#'}" target="_blank" class="text-primary hover:underline">
								${item.imageUrl || '-'}
							</a>
						</p>
						${item.imageUrl ? `
						<div class="mt-2 border rounded-md overflow-hidden max-w-xs">
							<img src="${item.imageUrl}" 
								alt="图片预览" 
								class="w-full h-auto object-contain max-h-20"
								loading="lazy">
						</div>
						` : ''}
					</div>
					
                    <div>
                        <p class="text-sm text-gray-500">类型</p>
                        <p>${item.type || '-'}</p>
                    </div>
					<div>
						<p class="text-sm text-gray-500">软件大小</p>
						<p>${item.size || '-'}</p>
					</div>
                    <div>
                        <p class="text-sm text-gray-500">网盘</p>
                        <p>${netdiskName}</p>
                    </div>
                    <div class="md:col-span-2">
                        <p class="text-sm text-gray-500">描述</p>
                        <p>${item.description || '-'}</p>
                    </div>
                    <div class="md:col-span-2">
                        <p class="text-sm text-gray-500">网盘链接</p>
                        <p class="break-all">
                            <a href="${netdiskLink}" target="_blank" class="text-primary hover:underline">${netdiskLink}</a>
                            ${shareCode ? `<span class="ml-2 inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-primary/10 text-primary">提取码: ${shareCode}</span>` : ''}
                        </p>
                    </div>
                    <div class="md:col-span-2">
                        <p class="text-sm text-gray-500">详细说明</p>
                        <p class="whitespace-pre-line">${item.details || '-'}</p>
                    </div>
                </div>
                ${screenshotsHtml}
            `;
            
            // 显示详情面板
            detailPanel.classList.remove('hidden');
            editFormPanel.classList.add('hidden');
            
            // 滚动到详情面板
            detailPanel.scrollIntoView({ behavior: 'smooth', block: 'start' });
        }

        // 打开新增表单
        function openAddForm() {
            formTitle.textContent = '新增数据';
            currentEditId = null;
            formId.value = '';
            
            // 重置表单
            dataForm.reset();
            document.getElementById('screenshots').value = '';
            
            // 显示表单，隐藏详情
            editFormPanel.classList.remove('hidden');
            detailPanel.classList.add('hidden');
            
            // 滚动到表单
            editFormPanel.scrollIntoView({ behavior: 'smooth', block: 'start' });
        }

        // 编辑项目
        function editItem(id) {
            const item = dataList.find(item => item.id === id);
            if (!item) return;
            
            currentEditId = id;
            formTitle.textContent = '编辑数据';
            formId.value = id;
            
            // 填充表单字段
            document.getElementById('title').value = item.title || '';
            document.getElementById('description').value = item.description || '';
            document.getElementById('type').value = item.type || '';
			document.getElementById('size').value = item.size || '';  // 新增这一行
            document.getElementById('category').value = item.category || '';
            document.getElementById('imageUrl').value = item.imageUrl || '';
            
            // 处理兼容性字段
            document.getElementById('netdiskLink').value = item.netdiskLink || item['网盘链接'] || '';
            document.getElementById('shareCode').value = item.shareCode || item['提取码'] || '';
            document.getElementById('netdiskName').value = item.netdiskName || '';
            
            document.getElementById('details').value = item.details || '';
            
            // 处理截图
            if (item.screenshots && item.screenshots.length > 0) {
                document.getElementById('screenshots').value = item.screenshots.join('\n');
            } else {
                document.getElementById('screenshots').value = '';
            }
            
            // 显示表单，隐藏详情
            editFormPanel.classList.remove('hidden');
            detailPanel.classList.add('hidden');
            
            // 滚动到表单
            editFormPanel.scrollIntoView({ behavior: 'smooth', block: 'start' });
        }

        // 处理表单提交
        function handleFormSubmit(e) {
            e.preventDefault();
            
            // 收集表单数据
            const formData = {
                title: document.getElementById('title').value.trim(),
                description: document.getElementById('description').value.trim(),
                type: document.getElementById('type').value.trim(),
				size: document.getElementById('size').value.trim(),  // 新增这一行
                category: document.getElementById('category').value.trim(),
                imageUrl: document.getElementById('imageUrl').value.trim(),
                netdiskLink: document.getElementById('netdiskLink').value.trim(),
                shareCode: document.getElementById('shareCode').value.trim(),
                netdiskName: document.getElementById('netdiskName').value.trim(),
                details: document.getElementById('details').value.trim(),
                // 处理截图，过滤空行
                screenshots: document.getElementById('screenshots').value
                    .split('\n')
                    .map(line => line.trim())
                    .filter(line => line)
            };
            
            if (currentEditId === null) {
                // 新增数据
                const newId = dataList.length > 0 
                    ? Math.max(...dataList.map(item => item.id)) + 1 
                    : 1;
                
                const newItem = {
                    id: newId,
                    ...formData
                };
                
                dataList.push(newItem);
                showToast('success', '数据添加成功');
            } else {
                // 更新数据
                const index = dataList.findIndex(item => item.id === currentEditId);
                if (index !== -1) {
                    dataList[index] = {
                        ...dataList[index],
                        ...formData
                    };
                    showToast('success', '数据更新成功');
                }
            }
            
            // 保存到本地存储
            if (saveDataToLocalStorage()) {
                // 重新渲染列表并关闭表单
                renderDataList();
                closeForm();
            }
        }

        // 确认删除项目
        function confirmDeleteItem(id) {
            const item = dataList.find(item => item.id === id);
            if (!item) return;
            
            currentDeleteId = id;
            document.querySelector('#dialogMessage').textContent = 
                `您确定要删除 ID 为 ${id} 的「${item.title}」吗？此操作不可撤销。`;
            
            // 显示确认对话框
            confirmDialog.classList.remove('hidden');
            setTimeout(() => {
                dialogContent.classList.remove('scale-95', 'opacity-0');
                dialogContent.classList.add('scale-100', 'opacity-100');
            }, 10);
        }

        // 确认删除
        function confirmDelete() {
            if (currentDeleteId === null) return;
            
            const index = dataList.findIndex(item => item.id === currentDeleteId);
            if (index !== -1) {
                dataList.splice(index, 1);
                
                // 保存到本地存储
                if (saveDataToLocalStorage()) {
                    renderDataList();
                    showToast('success', '数据已删除');
                }
            }
            
            closeConfirmDialog();
            currentDeleteId = null;
        }

        // 关闭确认对话框
        function closeConfirmDialog() {
            dialogContent.classList.remove('scale-100', 'opacity-100');
            dialogContent.classList.add('scale-95', 'opacity-0');
            
            setTimeout(() => {
                confirmDialog.classList.add('hidden');
            }, 300);
        }

        // 关闭表单
        function closeForm() {
            editFormPanel.classList.add('hidden');
            currentEditId = null;
        }

        // 关闭详情
        function closeDetail() {
            detailPanel.classList.add('hidden');
        }

        // 导出数据
        function exportData() {
            if (dataList.length === 0) {
                showToast('warning', '没有数据可导出');
                return;
            }
            
            const dataStr = JSON.stringify(dataList, null, 2);
            const dataBlob = new Blob([dataStr], { type: 'application/json' });
            const url = URL.createObjectURL(dataBlob);
            
            const a = document.createElement('a');
            a.href = url;
            a.download = `mcang_data.txt`;
            document.body.appendChild(a);
            a.click();
            
            setTimeout(() => {
                document.body.removeChild(a);
                URL.revokeObjectURL(url);
            }, 0);
            
            showToast('success', '数据导出成功');
        }

        // 导入数据
        function importData(e) {
            const file = e.target.files[0];
            if (!file) return;
            
            const reader = new FileReader();
            reader.onload = function(event) {
                try {
                    const importedData = JSON.parse(event.target.result);
                    
                    if (!Array.isArray(importedData)) {
                        showToast('error', '导入的数据格式不正确，应为数组');
                        return;
                    }
                    
                    // 增量添加，跳过ID已存在的数据
                    let addedCount = 0;
                    importedData.forEach(item => {
                        if (item.id && !dataList.some(existing => existing.id === item.id)) {
                            // 标准化数据结构，确保字段名一致
                            const normalizedItem = {
                                id: item.id,
                                title: item.title || '',
                                description: item.description || '',
                                type: item.type || '',
								size: item.size || '',
                                category: item.category || '',
                                imageUrl: item.imageUrl || '',
                                netdiskLink: item.netdiskLink || item['网盘链接'] || '',
                                shareCode: item.shareCode || item['提取码'] || '',
                                netdiskName: item.netdiskName || '',
                                details: item.details || '',
                                screenshots: Array.isArray(item.screenshots) ? item.screenshots : []
                            };
                            
                            dataList.push(normalizedItem);
                            addedCount++;
                        }
                    });
                    
                    // 保存到本地存储
                    if (saveDataToLocalStorage()) {
                        renderDataList();
                        showToast('success', `成功导入 ${addedCount} 条数据，${importedData.length - addedCount} 条数据因ID已存在被跳过`);
                    }
                } catch (error) {
                    showToast('error', '导入失败，文件格式不正确');
                    console.error('Import error:', error);
                }
            };
            
            reader.readAsText(file);
            
            // 重置文件输入，允许重复选择同一文件
            document.getElementById('fileInput').value = '';
        }

        // 显示提示框
        function showToast(type, message) {
            // 设置图标和样式
            if (type === 'success') {
                toastIcon.className = 'fa fa-check-circle text-success';
                toast.className = 'fixed top-4 right-4 px-4 py-3 rounded-md shadow-lg bg-white border-l-4 border-success transform translate-x-full transition-transform duration-300 flex items-center z-50';
            } else if (type === 'error') {
                toastIcon.className = 'fa fa-times-circle text-danger';
                toast.className = 'fixed top-4 right-4 px-4 py-3 rounded-md shadow-lg bg-white border-l-4 border-danger transform translate-x-full transition-transform duration-300 flex items-center z-50';
            } else if (type === 'warning') {
                toastIcon.className = 'fa fa-exclamation-triangle text-warning';
                toast.className = 'fixed top-4 right-4 px-4 py-3 rounded-md shadow-lg bg-white border-l-4 border-warning transform translate-x-full transition-transform duration-300 flex items-center z-50';
            } else if (type === 'info') {
                toastIcon.className = 'fa fa-info-circle text-primary';
                toast.className = 'fixed top-4 right-4 px-4 py-3 rounded-md shadow-lg bg-white border-l-4 border-primary transform translate-x-full transition-transform duration-300 flex items-center z-50';
            }
            
            // 设置消息
            toastMessage.textContent = message;
            
            // 显示提示框
            setTimeout(() => {
                toast.classList.remove('translate-x-full');
            }, 10);
            
            // 3秒后隐藏
            setTimeout(() => {
                toast.classList.add('translate-x-full');
            }, 3000);
        }
    </script>
</body>
</html>